<!-- * 文件名：tab切换组件
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2024-12-24  -->
<template>
	<view class="subsectionBox"
		:style="{ marginTop: props.marginTop + 'rpx', marginBottom: props.marginBottom + 'rpx' }">
		<u-subsection :list="props.list" :current="curNow" @change="sectionChange" bg-color="#3e792e"
			button-color="#ffffff" active-color="#483D33" inactive-color="#ffffff" :font-size="28" :height="72"
			:bold="false"></u-subsection>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
interface listItemInterface {
	name: string
	// url: string
}

const emits = defineEmits(["sectionChange"])

const props = defineProps({
	list: {
		type: Array<listItemInterface>,
		default: [
			{ name: '选项1' },
			{ name: '选项2' },
		]
	},
	curNow: {
		type: Number,
		default: 0
	},
	marginTop: {
		type: Number,
		default: 0
	},
	marginBottom: {
		type: Number,
		default: 0
	},
	isDelay: {
		type: Boolean,
		default: false, //是否需要延时切换  （添加原因：防止在有列表的页面切换时卡顿） 
	},
	delayTime: {
		type: Number,
		default: 500, // 默认500ms
	},
})
let timeoutId: string | number | NodeJS.Timeout | null | undefined = null;
const sectionChange = (index: number): void => {
	if (props.isDelay) {
		if (timeoutId) clearTimeout(timeoutId);
		timeoutId = setTimeout(() => {
			emits('sectionChange', index);
		}, props.delayTime);
	} else {
		emits("sectionChange", index)
	}

}
</script>

<style scoped lang="scss">
.subsectionBox {
	margin: 0 28rpx;
}
</style>